<template>
  <div class="content">
    <van-nav-bar :title="className" left-text="返回"
                 left-arrow
                 @click-left="onClickLeft"/>
    <div v-if="index===0">
      <b>HTML<sup>5</sup>Test</b><br>
      <cite>HTML5</cite><br>
      <bdo dir="rtl">HTML5</bdo><br>
      <mark>HTML5</mark><br>
      <time>2015-10-10</time><br>
      <a href="http://www.baidu.com">百度</a><br>
      <a href="http://www.baidu.com" target="_blank">百度</a><br>
      <a href="#1">第一章</a>
      <a href="#2">第二章</a>
      <a href="#3">第三章</a> //锚点
      &lt;a name="1"&gt;&lt;/a&gt;&lt;a id="3"&gt;&lt;/a&gt;

      <span><b>段落</b></span><br>
      <p> 这是一个段落 </p>
      <p> 这也是一个段落 </p>

      <span><b>通用分组</b></span><br>
      <div> 这是一个通用分组 </div>
      <div> 这是又一个通用分组 </div>

      <span><b>blockquote引用大段他出内容</b></span><br>
      <blockquote> 这是一个大段引自他出内容 </blockquote>
      <blockquote> 这是另一个大段引自他出内容 </blockquote>

      <span><b>展现格式化内容</b></span><br>
      <pre> #####
        #####
            #####
        #####
    ##### </pre>

      <hr><b>添加分隔</b>

      <span><b>添加无序列表</b></span><br>
      <ul>
        <li> 张三 </li>
        <li> 李四 </li>
        <li> 王五 </li>
        <li> 马六 </li>
      </ul>
      <span><b>添加有序列表</b></span><br>
      <ol type=1>
        <li> 张三 </li>
        <li> 李四 </li>
        <li> 王五 </li>
        <li> 马六 </li>
      </ol>
      <span><b>生成说明列表</b></span><br>
      <dl>
        <dt> 这是一份文件 </dt>
        <dd> 这里是这份文件的详细内容 1 </dd>
        <dd> 这里是这份文件的详细内容 2 </dd>
      </dl>
      <span><b>生成说明列表</b></span><br>
      <figure>
        <figcaption> 这是一张图 </figcaption>
        <img src="img.png" alt="">
      </figure>

      <span><b>表格元素</b></span><br>
      <table border="1">
        <tr>
          <td>张三</td>
          <td>男</td>
          <td>未婚</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>
          <td>已婚</td>
        </tr>
      </table>
      <span><b>表格元素 有th标题的</b></span><br>
      <table border="1" style="width:300px;">
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>婚姻</th>
        </tr>
        <tr>
          <td>张三</td>
          <td>男</td>
          <td>未婚</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>女</td>
          <td>已婚</td>
        </tr>
      </table>

      <span><b>thead添加表头</b></span><br>
      <thead>
      <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>婚姻</th>
      </tr>
      </thead>
      <span><b>tfoot添加表脚</b></span><br>
      <tfoot>
      <tr>
        <td colspan="3">统计：共两名</td>
      </tr>
      </tfoot>

      <span><b>tbody添加表主体</b></span><br><br>
      <tbody>
      <tr>
        <td>张三</td>
        <td>男</td>
        <td>未婚</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>女</td>
        <td>已婚</td>
      </tr>
      </tbody>
  </div>
    <div v-else-if="index===1">
      <div class="second">
        <div class="second-item1">1
        </div>
        <div class="second-item2">2
        </div>
        <div class="second-item3">3
        </div>
        <div class="second-item4">4
        </div>
        <div class="second-item5">5
        </div>
        <div class="second-item6">6
        </div>
      </div>
    </div>
    <div v-else-if="index===2">
      <div class="three">
          <div class="three-content1">
            <span class="three-item1">测试1</span>
            <span class="three-item2">测试2</span>
            <div class="three-item3">测试3</div>
            <div class="three-item4">测试4</div>
          </div>
        <div class="three-content2">
          <span class="three-item5">测试2-5</span>
          <span class="three-item6">测试2-6</span>
          <div class="three-item7">测试2-7</div>
          <div class="three-item8">测试2-8</div>
        </div>
        <div class="three-content3">
          <span class="three-item5">测试3-5</span>
          <span class="three-item6">测试3-6</span>
          <div class="three-item7">测试3-7</div>
          <div class="three-item8">测试3-8</div>
        </div>
      </div>
    </div>
    <div v-else-if="index===3">
      <div class="four">
        <div class="four-middle">
        </div>
        <div class="four-bottom">底部按钮
          <div class="four-bottom-content">
          </div>
        </div>
      </div>
    </div>
    <div v-else-if="index===4">
      <div class="five" ref="r_five">
        <div class="five-left">左边部分
          <van-button style="margin-top: 2rem" text="移位" @click="moveBit"></van-button>
        </div>
        <div class="five-right">右边部分
        </div>
      </div>
    </div>
    <div v-else-if="index===5">
      <div class="sex">
          <canvas ref="myCanvas" style="width: 800px;height: 600px;background-color: antiquewhite">
          </canvas>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      return {
        index: 0,
        className: ""
      }
    },
    mounted() {
      this.index = Number.parseInt(this.$route.query.index)
      this.className = this.$route.query.className
      this.canvasTest()
    },
    methods: {
      onClickLeft(){
        this.$router.push("/list")
      },
      /**
       * 移位操作
       */
      moveBit(){
        let bob = new Blob(["sssssss"])
        bob.text().then((res)=>{
          console.log(res)
        })
      },
      /**
       * 绘制测试
       */
      canvasTest(){
        let c = this.$refs.myCanvas
        console.log(c)
        // let ctx = c.getContext("2d")
        // ctx.fillStyle = "FF0000"
        // //画矩形
        // ctx.fillRect(0,0,120,80)
        // //画线
        // ctx.moveTo(0,0)
        // ctx.lineTo(210,180)
        // ctx.stroke()
      }
    }
  }
</script>
<style scoped lang="less">
  .second {
    display: flex;
    height: 600px;
    //margin: 20px;
    //padding-top: 60px;
    flex-direction: row; //轴的方向
    flex-wrap: wrap; //是否换行
    flex-flow:  row wrap; //属性是集合了排列方向和控制换行的简写形式。
    justify-content: space-around; //子项的排列方式
    //flex-align: center; //处理伸缩项目容器的额外空间
    //align-content: space-evenly; //将所有子项看成一个整体，居于父级布局的相对位置
    //align-items: center; //每一个子项的位置
    background-color: gainsboro;
    text-align: center;
    .second-item1 {
      //order: 6;
      padding: 10px;
      width: 200px;
      height: 80px;
      color: white;
      justify-self: center; //设置自己的对齐方式
      background-color: green;
    }
    .second-item2 {
      //order: 4;
      padding: 10px;
      width: 200px;
      height: 90px;
      color: white;
      background-color: green;
    }
    .second-item3 {
      //order: 5;
      padding: 10px;
      width: 200px;
      height: 80px;
      color: white;
      background-color: green;
    }
    .second-item4 {
      //order: 3;
      padding: 10px;
      width: 200px;
      height: 120px;
      color: white;
      background-color: green;
    }
    .second-item5 {
      //order: 1;
      padding: 10px;
      width: 200px;
      height: 90px;
      color: white;
      //flex-grow: 1;
      //flex-shrink: 1;
      align-self: center;
      background-color: green;
    }
    .second-item6 {
      //order: 2;
      padding: 10px;
      width: 200px;
      height: 60px;
      color: white;
      //flex-grow: 6;
      //flex-shrink: 6;
      flex: 0 1 auto;
      background-color: green;
    }
  }
  .three {
    position: relative;
    background-color: whitesmoke;
    .three-content1 {
      position: absolute;
      left: 0;
      top: 0;
      margin: 20px;
      background-color: gainsboro;
      .three-item1 {
        width: 80px;
        height: 80px;
        display: inline-block;
        background-color: red;
      }
      .three-item2 {
        width: 80px;
        height: 60px;
        display: block;
        background-color: yellow;
      }
      .three-item3 {
        width: 100px;
        height: 60px;
        color: whitesmoke;
        background-color: blue;
        overflow-y: scroll;
      }
      .three-item4 {
        width: 160px;
        height: 30px;
        background-color: green;
      }
      .three-item3 .three-item4 {
        display: inline;
      }
      //span::before{
      //  height: 60px;
      //  width: 80px;
      //  text-align: center;
      //  content: "before";
      //  background-color: salmon;
      //}
      //span::after{
      //  height: 60px;
      //  width: 80px;
      //  text-align: center;
      //  content: "3344";
      //  background-color: brown;
      //}
      .three-item3:first-letter{
        color: orange;
      }
      .three-item3:active{
        color: red;
      }
      .three-item4:hover {
        content: "鼠标选中";
        color: aquamarine;
      }
    }
    .three-content2 {
      .three-item5 {
        width: 60px;
        height: 60px;
        background-color: green;
      }
      .three-item6 {
        width: 60px;
        height: 60px;
        background-color: red;
      }
      .three-item7 {
        width: 60px;
        height: 60px;
        background-color: blue;
      }
      .three-item8 {
        width: 60px;
        height: 60px;
        background-color: orange;
      }
    }
    .three-content3 {
      max-width: 600px;
      .three-item5 {
        width: 60px;
        height: 60px;
        background-color: green;
      }
      .three-item6 {
        float: right;
        width: 60px;
        height: 60px;
        background-color: red;
      }
      .three-item7 {
        float: right;
        width: 60px;
        height: 60px;
        background-color: blue;
      }
      .three-item8 {
        width: 60px;
        height: 60px;
        background-color: orange;
      }
    }
  }
  .four {
    background-color: whitesmoke;
    .four-middle {
      position: absolute;
      height: auto;
      overflow: auto;
      width: 100%;
      top: 45px;
      bottom: 60px;
      background-color: salmon;
    }
    .four-bottom {
      position: absolute;
      height: 60px;
      width: 100%;
      bottom: 0;
      text-align: center;
      background-color: cadetblue;
    }:hover {
      color: crimson;
      background-color: orange;
    }:active {
      background-color: blue;
    }
  }
  .five {
    position: relative;
    .five-left {
      position: absolute;
      left: 0;
      top: 0;
      width: 10%;
      height: 100vh;
      background: cadetblue;
    }
    .five-right {
      position: absolute;
      left: 10%;
      top: 0;
      height: 100vh;
      width: 100%;
      background: darkgray;
    }
  }
  .sex {

  }
</style>